<template>
	<view>
		<uni-nav-bar left-icon="arrowthinleft" title="商家费用缴纳窗口" :border="false" :fixed="true" bg="bg-fff" color="#333" @clickLeft="goBack()"></uni-nav-bar>
		<view class="bg-fff padding-x-24">
			<view class="fs-28 color-333 padding-y-24 flex align-center">
				<text>应缴纳平台费用</text>
				<text @click="jump('/pages/my/jiaofei_xq')" class="margin-left-40 fs-22 color-zhuse" style="padding: 6rpx 14rpx;background: rgba(255, 116, 65, 0.08);">查看详情</text>
			</view>
			<view class="solid-bottom flex align-center justify-between">
				<text class="fs-40 color-zhuse">￥</text>
				<input type="text" disabled v-model="info.set_fee" placeholder="请输入" class="fs-32 margin-left-20 color-zhuse flex1 h40">
			</view>
			<view class="fs-24 color-999 padding-y-24 flex">
				<text class="color-666 margin-right-10">包括：</text>
				<text>
					{{info.se_fee_rule}}
				</text>   
            </view>
		</view>
		<view class="padding-24 bg-fff margin-top-20">
			<view class="fw-600 flex align-center">
				<view class="bg-zhuse" style="width: 6rpx;height: 30rpx;"></view>
				<text class="fs-30 color-333 margin-left-16">缴纳方式</text>
			</view>
			<radio-group @change="change">
				<label class="flex align-center justify-between padding-top-30 margin-top-20">
					<view class="flex align-center">
						<image class="ruzhu_pay_style" src="../../static/img/wx.png" mode="aspectFit">
						</image>
						<text class="fs-30 color-333">微信</text>
					</view>
					<radio value="wechat" checked />
				</label>
				<label class="flex align-center justify-between padding-y-30 ">
					<view class="flex align-center">
						<image class="ruzhu_pay_style" src="../../static/img/ali.png" mode="aspectFit">
						</image>
						<text class="fs-30 color-333">支付宝</text>
					</view>
					<radio value="alipay" />
				</label>
			</radio-group>
		</view>
		<view class="padding-x-40 margin-y-60 padding-bottom-30">
			<view @tap="submit()" class="callBtn color-fff radius60 h40 fs-28 text-center">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subInfo: {
					amount: "",
					method: "wechat",
					type: "",
				},
				info:{},
				subInfo: {
					target: '',
					target_type: 'fee',
					pay_type: 'wechat',
					money:'',
					extra:''
				},
			}
		},
		onLoad(opt) {
			this.init()
		},
		methods:{
			init(){
				this.$api.fee_info().then(res => {
					if(res.code == 1){
						this.info = res.data
					}
				})
			},
			submit(){
				this.$api.pay(this.subInfo).then(res => {
					if (res.code == 1) {
						var info = res.data.payParams;
						// #ifdef APP-PLUS
						var provider;
						if (this.subInfo.pay_type == 'wechat') {
							provider = 'wxpay';
						} else if (this.subInfo.pay_type == 'alipay') {
							provider = 'alipay';
						}
						uni.requestPayment({
							provider: provider,
							orderInfo: info,
							success: function(res) {
								setTimeout(() => {
									uni.switchTab({
										url:'/pages/my/my'
									})
								}, 300)
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
						// #endif
					}else{
						this.$msg(res.msg)
					}
				})
			},
			change(e){
				this.subInfo.pay_type = e.detail.value;
			}
		}
	}
</script>

<style>
	page{background: #F7F7F7;}
</style>
<style lang="scss" scoped>
	.uni-input-placeholder{color: $uni-color-zhuse;}
	.ruzhu_pay_style{width: 56rpx;height: 56rpx;}
	.callBtn{
		width: 100%;height: 80rpx;line-height: 80rpx;border-radius: 60rpx; background: linear-gradient(to bottom,#FDA730,#FE810A);
	}
</style>